<template>
  <div>
    <h1>Setup 起步</h1>
    <p>1. 组合式API 的入口是 setup 选项</p>

    <hr />
    <!-- 
      模板中使用 ref 数据，无需 .value 。因为 Vue 处理了。该处理叫做解包。
     -->
    <button @click="increment">{{ count }}</button> <br />
    <button>{{ msg }}</button>

    <hr />
    <Hello />
  </div>
</template>

<script>
// 引入 组合式API
import { ref } from 'vue'

// 引入 自定义的 hook
import { useCounter } from '@/hooks/counter'
import { useTitle } from '@/hooks/title'

// 引入 组件
import Hello from './conmponents/hello.vue'

export default {
  components: {
    Hello
  },

  /**
   * 组合式API的入口
   *    1. 这里使用不了 this
   */
  setup() {
    // 调用 自定义hook
    const { count, increment } = useCounter()
    useTitle(count)

    // 通过 ref() 创建响应式数据
    //      1. 返回值是一个包含有 value 属性的对象
    //      2. 在 JS 上访问内容时，需要 .value

    const msg = ref('hello')
    console.log('count', count)

    // 数据或方法需要在模板中使用的话，则需要 return {}
    //      1. 对象的 key 做绑定到组件的 实例对象上 this
    return {
      count,
      msg,
      increment
    }
  }
}
</script>
